<template>
	<page-body>
		<view class="page">
			<!-- 			<view class="flex benben-position-layout flex flex-wrap align-center talk_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub talk_fd0_0'>
					<view class='flex flex-wrap align-center talk_fd0_0_c0'>
						<text class='fu-iconfont2  talk_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='talk_fd0_0_c1_c0'>班级详情 </text>
					</view>
					<view class='flex flex-wrap align-center justify-end talk_fd0_0_c0'>
					</view>
				</view>
			</view> -->
			<view class="page-content">
				<view class="search" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/course/schoolPeople/schoolPeople?groupId=${groupId}`">
					<image style="width: 28rpx;height: 28rpx; margin-right: 12rpx;" src="@/static/talkImage/search.png"
						mode=""></image>
					搜索群成员
				</view>
				<view class="people-outer">
					<view class="total">
						班级成员
						<view class="num" @tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/course/schoolPeople/schoolPeople?groupId=${groupId}`">
							查看{{ peopleList.length }}名班级成员 <image style="width: 22rpx;height: 22rpx;margin-left: 12rpx;"
								src="@/static/talkImage/open.png" mode="">
							</image>
						</view>
					</view>
					<div class="people-all">
						<view class="ite" v-for="item in peopleList" :key="item.userID">
							<image class="touxiang" :src="item.avatar" mode=""></image>
							<view class="name">
								{{item.nick}}
							</view>
						</view>
					</div>
				</view>

				<view class="message-title">
					群聊信息
				</view>
				<view class="message">
					<view class="course">
						<view class="">
							班级名称
						</view>
						<view class="course-right">
							{{baseObj.baseclass_name }}
						</view>
					</view>
					<view class="course">
						<view class="">
							课程名称
						</view>
						<view class="course-right">
							{{baseObj.courseplan_name }}
						</view>
					</view>
					<view class="course-other" @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/course/qunGongGao/qunGongGao?gaostr=${gaostr}`">
						<view class="">
							群公告
						</view>
						<view class="course-bottom">
							<view class="bottom-cont">
								{{gaostr}}
							</view>
							<image style="width: 22rpx;height: 22rpx" src="@/static/talkImage/open.png" mode="">
						</view>

					</view>
					<view class="course" @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/course/classQu/classQu?groupId=${groupId}`">
						<view class="">
							班级二维码
						</view>
						<view class="course-right">
							{{groupId}}
							<image style="width: 32rpx;height: 32rpx;margin:0 12rpx;" src="@/static/talkImage/ma.png"
								mode=""></image>
							<image style="width: 22rpx;height: 22rpx" src="@/static/talkImage/open.png" mode="">
						</view>
					</view>
				</view>
				<view class="file-outer" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/course/historyFile/historyFile?groupId=${groupId}`">
					历史文件
					<image style="width: 22rpx;height: 22rpx" src="@/static/talkImage/open.png" mode="">
				</view>

				<view class="message-title">
					聊天会话
				</view>
				<view style="height: 306rpx;" class="message">
					<view class="course">
						<view class="">
							消息免打扰
						</view>
						<view class="course-right">
							计算机二班
						</view>
					</view>
					<view class="course">
						<view class="">
							搜索聊天记录
						</view>
						<image style="width: 22rpx;height: 22rpx" src="@/static/talkImage/open.png" mode="">
					</view>
					<view class="course" @click.stop="clearJiLu">
						<view class="">
							清空聊天记录
						</view>
						<image style="width: 22rpx;height: 22rpx" src="@/static/talkImage/open.png" mode="">
					</view>
				</view>
				<view class="file-outer" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/course/reportPage/reportPage?groupId=${groupId}`">
					举报
					<image style="width: 22rpx;height: 22rpx" src="@/static/talkImage/open.png" mode="">
				</view>
				<view class="tui" @tap.stop="tuichu">
					退出群聊
				</view>
			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import {
		TUIConversationService
	} from '@tencentcloud/chat-uikit-engine';

	// import TIM from 'tim-js-sdk'
	// import TIMUploadPlugin from 'tim-upload-plugin'
	// const tim = TIM.create({
	// 	SDKAppID: 'GROUP%40TGS%231UCA3KUR4' // 替换成你自己的
	// })

	export default {
		data() {
			return {
				groupId: "",
				peopleList: [],
				gaostr: '',
				baseObj: ''
			}
		},
		// 小程序页面生命周期，如果是 uni-app 可以写
		onLoad(options) {
			this.groupId = decodeURIComponent(options.groupId)
		},
		onShow() {
			this.getPeopleList()
			this.getGaoList()

			this.baseObj = uni.getStorageSync('BASEOBJ') || ''
		},
		computed: {
			// 计算属性
		},
		watch: {
			// 监听器
		},
		methods: {
			clearJiLu() {
				let promise = uni.$chat.clearHistoryMessage('GROUP' + this.groupId);
				promise.then(function(imResponse) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				}).catch(function(imError) {
					console.warn('clearHistoryMessage error:', imError); // 清空消息失败的相关信息
				});
			},
			tuichu() {
				let promise = uni.$chat.quitGroup(this.groupId);
				promise.then(function(imResponse) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				}).catch(function(imError) {
					console.warn('clearHistoryMessage error:', imError); // 清空消息失败的相关信息
				});
			},
			// 群成员
			getPeopleList() {
				console.log('......................', uni.$chat);
				let promise = uni.$chat.getGroupMemberList({
					groupID: this.groupId,
				});
				promise.then((imResponse) => {
					this.peopleList = imResponse.data.memberList;
					console.log('44444444444444444444', this.peopleList);
				}).catch((imError) => {
					console.warn('获取失败:', imError);
				});
			},
			//群公告
			getGaoList() {
				let promise = uni.$chat.getGroupProfile({
					groupID: this.groupId,
				});
				promise.then((imResponse) => {
					this.gaostr = imResponse.data.group.notification
					console.log('6666666666666666', this.gaostr);
				}).catch((imError) => {
					console.warn('获取失败:', imError);
				});
			}

		},

		onReady() {},

		onHide() {},
		onUnload() {},
	}
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F3F4F8;
		background-size: 100% auto;

	}

	.page-content {}

	.search {
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #CCCCCC;
	}

	.file-outer {
		height: 102rpx;
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
	}

	.tui {
		height: 102rpx;
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		line-height: 102rpx;
		color: #ED5E5B;
	}

	.message-title {
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 37rpx;
		margin: 28rpx 0 0 24rpx;
	}

	.message {
		margin: 16rpx 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		overflow: hidden;

		.course {
			margin: 28rpx 24rpx 56rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 46rpx;
			display: flex;
			justify-content: space-between;

			.course-right {
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
				display: flex;
				align-items: center;
			}
		}

		.course-other {
			margin: 28rpx 24rpx 36rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 46rpx;

			.course-bottom {
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				justify-content: space-between;

				.bottom-cont {
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					width: 588rpx;
				}
			}
		}
	}

	.people-outer {
		max-height: 570rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 24rpx;
		padding-bottom: 24rpx;
		overflow: hidden;

		.total {
			margin: 24rpx;
			height: 49rpx;
			font-weight: 400;
			font-size: 34rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.people-all {
			margin: 30rpx 32rpx 0;
			display: grid;
			grid-template-columns: repeat(auto-fill, 72rpx);
			justify-content: space-between;
			/* 两端对齐 */
			gap: 70rpx;
			row-gap: 36rpx;
			/* 控制间距 */

			.ite {
				width: 72rpx;


				.touxiang {
					width: 72rpx;
					height: 72rpx;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
				}

				.name {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 35rpx;
					margin-top: 12rpx;
				}
			}
		}
	}

	.talk_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.talk_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.talk_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.talk_fd0_0_c0 {
		width: 120rpx;
	}

	.talk_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.talk_flex_1 {
		padding: 24rpx;
	}
</style>